<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
</head>
<body>
  <div id="app"></div>

  <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
  <script type="text/javascript">
    /**
     * 数据中'哈哈哈'为input元素value属性的原始值，通过button的click事件将新值赋给了myValue
     *
     * vue察觉到页面的中使用的变量修改了，所以重新渲染了页面
     * */
    new Vue({
      el: '#app',
      template: `
          <div>
            <input type="text" v-bind:value="myValue" :file=" 'xxx' "/>

            <hr/>
            <button v-on:click=" myValue='是不是你按了button' ">点我改变myValue</button>
            <button @click=" myValue='按了简写button' ">简写改变myValue</button>

          </div>
      `,
      data: function () {
        return {
          myValue: '哈哈哈'

        }
      }
    });

  </script>
</body>
</html>
